<template>
    <div id="app" :style="{ background: 'url(' + backgroundImage + ') 0% 0% / 100% 100% no-repeat' }">
        <div class="x_title">{{ x_title }}</div>
        <div class="subheadingStyle">{{ subheading }}</div>
        <div class="top" @click="scrollToTop" :style="topStyle">
            <i class="iStyle el-icon-upload2"></i>
            <!-- 回到顶部 -->
        </div>
        <!-- 关注公众号 -->
        <div class="officialAccounts" :class="isTop ? 'officialAccountsHover' : ''">
            <div>扫码关注公众号</div>
            <div><img src="images/qrCode.jpg" alt=""></div>
            <div @click="closeCode" class="close">X</div>
        </div>

        <nav>
            <xNav />
            <!-- <xNavVue/> -->
        </nav>

        <router-view class="x-router-height" />

        <footer>
            <xFooter />
        </footer>
    </div>
</template>


<script>
import xNav from "@/components/xNav";
import xFooter from "@/components/xFooter";
export default {
    name: 'App',
    components: {
        xNav,
        xFooter
    },

    data() {
        return {
            xNavBottom: '',
            backgroundImageList: {
                url1: "images/banner_bg.jpg",
                url2: "images/banner_bg1.png",
                url3: "images/banner_bg2.jpg",
                url4: "images/banner_bg3.jpg"
            },
            backgroundImage: "images/banner_bg.jpg",//初始默认图片
            x_title: "",
            subheading: "",
            topStyle: {
                // display: "none",
                opacity: 0
            },
            isTop: false,
            // 记录用户是否关闭了盒子
            isTopShow:true
        };
    },

    mounted() {
        // 测试发送ajax请求
        // this.axios.get("/api/sys").then(function (success) {
        //     console.log(success);
        // })
        console.log("当前在1", this.$route.name);
        if (this.$route.name == "home") {
            this.backgroundImage = this.backgroundImageList.url1
            this.x_title = "认识万新"
            this.subheading = ""
        }
        if (this.$route.name == "information") {
            this.backgroundImage = this.backgroundImageList.url2
            this.x_title = "医学资讯"
            this.subheading = ""
        }
        if (this.$route.name == "recruit") {
            this.backgroundImage = this.backgroundImageList.url3
            this.x_title = "三甲医院新药免费治疗绿色通道"
            this.subheading = "我们承诺不以任何形式收取任何服务费用"
        }
        if (this.$route.name == "join") {
            this.backgroundImage = this.backgroundImageList.url4
            this.subheading = ""
            this.x_title = ""
        }
    },
    created() {
        // 使用全局前置守卫监听路由变化
        this.$router.beforeEach((to, from, next) => {
            // 根据不同的路由设置不同的背景图片
            if (to.name === 'home') {
                this.backgroundImage = this.backgroundImageList.url1;
                this.backgroundSize = "100% 100%";
                this.x_title = "万新医学"
                this.subheading = ""
                console.log(to.name);
            } else if (to.name === 'information') {
                this.backgroundImage = this.backgroundImageList.url2;
                this.x_title = "医学资讯"
                this.subheading = ""
                console.log(to.name);
            } else if (to.name === 'recruit') {
                this.backgroundImage = this.backgroundImageList.url3;
                this.x_title = "三甲医院新药免费治疗绿色通道"
                this.subheading = "我们承诺不以任何形式收取任何服务费用"
                console.log(to.name);
            } else if (to.name === 'join') {
                this.backgroundImage = this.backgroundImageList.url4;
                this.x_title = ""
                this.subheading = ""
                console.log(to.name);
            } else {
                // 其他路由使用默认背景图片
                this.backgroundImage = this.backgroundImageList.url1;
                console.log(to.name);
            }
            next();
        });
        window.addEventListener('scroll', () => {
            // 获取垂直滚动偏移量
            const scrollY = window.scrollY || window.pageYOffset;

            // 打印滚动偏移量
            // console.log('垂直滚动偏移量:', scrollY);
            if (scrollY > 200) {
                // console.log("动了动了");
                this.topStyle.opacity = 1
                if (this.isTopShow) {
                    this.isTop = true
                }
            } else {
                this.topStyle.opacity = 0
                this.isTop = false
            }

            // 在这里可以执行你希望基于滚动偏移量执行的操作
        });
    },

    // // 页面发生变化时
    // console.log(offsetTop());

    methods: {
        closeCode() {
            this.isTop = false
            this.isTopShow = false
        },
        scrollToTop() {
            const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
            if (currentScroll > 0) {
                window.requestAnimationFrame(this.scrollToTop);
                window.scrollTo(0, currentScroll - currentScroll / 15); // 调整缓动速度
            }
        }
        // bgImgSrc(key) {
        //     console.log("APP组件",key);
        // }
    },
};
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

#app {
    width: 100%;
    height: 31.25rem;
    /* background: url("/src/assets/banner_bg.jpg") no-repeat; */
    background-size: 100% 100%;
    position: relative;
}

.x-router-height {
    padding-top: 31.25rem;
}

.x_title {
    font-weight: bold;
    font-size: 3rem;
    position: absolute;
    top: 15.625rem;
    left: 12.5rem;
    color: black;
}

.subheadingStyle {
    font-weight: bold;
    font-size: 2rem;
    position: absolute;
    top: 19.625rem;
    left: 15.6rem;
    color: black;
}

/* input全部改为圆形 */
.el-input__inner {
    border-radius: 3.125rem !important;
    background-color: #eeeeee76 !important;
    border: none !important;
    width: 17rem !important;
    margin-left: -3.125rem;
    height: 3rem !important;
}

::placeholder {
    font-size: 0.9rem !important;
    color: #696969 !important;
}

.el-form-item {
    margin-top: -0.65rem;
}



.top {
    width: 3.125rem;
    height: 3.125rem;
    /* background-color: blue; */
    background: linear-gradient(to bottom,  #87a5ff,#648AFF); /* 渐变颜色从红色到绿色 */
    border-radius: 50%;
    position: fixed;
    right: 3.125rem;
    bottom: 6.25rem;
    font-size: 0.6rem;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s; /* 添加过渡效果 */
}
.iStyle{
    font-size: 2rem;
    color: white;
    margin-top: 0.4rem;
    margin-left: 0.55rem;
    transition: all 0.3s;
}
.iStyle:hover{
    color: #666666;
}

.officialAccounts{
    width: 12.5rem;
    height: 14.375rem;
    background-color: white;
    border-radius: 0.625rem;
    box-shadow: 0 0 0.625rem #dfdfdf;
    position: fixed;
    right: 1.25rem;
    top: 11.25rem;
    display: none;
    transition: display 0.3s;
    z-index: 9999;
}
.officialAccountsHover{
    display: block;
}
.officialAccounts div:nth-child(1){
    height: 20%;
    text-align: center;
    font-size: 1.2rem;
    line-height: 4.6875rem;
}
.officialAccounts div:nth-child(2){
    /* background-color: yellow; */
    height: 80%;
}

.officialAccounts img{
    width: 80%;
    margin: 0.625rem 0 0 1.25rem;
}
.officialAccounts .close{
    cursor: pointer;
    position: absolute;
    top: 0.325rem;
    right: 0.625rem;
    transform: scale(1.25,1);
    color: #969696;
}
</style>
